<template>
  <div>
    <el-container>
      <el-main>
        <kendoForm
          :kendo-form-items="kendoFormItems"
          :kendo-form="kendoForm"
          :kendo-params-value="kendoParamsValue"
        />
      </el-main>
    </el-container>
    <el-container style="padding-left:5px">
      <el-main>
        <KendoGridCmpt
          :ref="'PrjMemberKendoGrid'"
          :table-grid-option="tableGridOption"
          :table-grid-data-source-option="tableGridDataSourceOption"
          :table-grid-toolbar="tableGridToolbar"
          @persistSelection="selectDataItems"
        />
      </el-main>
    </el-container>
  </div>

</template>

<script>
  import kendoForm from '@/Views/components/kendo-vue-component/kendoForm/index.vue'
  // import { isBlank } from '@/Utils/strUtil.js'
  export default {
    name: 'PrjMemberManage',
    components: {
      kendoForm
    },
    data() {
      return {
        /* Form*/
        kendoFormItems: [
          {
            name: 'memberName',
            label: '成员名称',
            paramName: 'prjName',
            controlType: 'input'
          },
          {
            ref: 'MEMBER_TYPE_CD',
            remoteData: true,
            cascade: true,
            name: 'memberType',
            label: '成员类型',
            paramName: 'memberType',
            optionLabel: '--请选择--',
            controlType: 'dropDownList',
            filter: 'contains',
            dataType: 'json',
            transportReadUrl: '/service/sysMng/dict/findDictByTypeWithForm',
            autoBind: true,
            schema: {
              data: function(response) {
                if (typeof response.data === 'object') {
                  if (JSON.stringify(response.data) === '{}') {
                    return []
                  }
                }
                return response.data
              }
            },
            dataMapping: {
              label: 'dictValNm',
              value: 'dictVal'
            },
            parameterMap: function(options, operation) {
              if (operation !== 'read' && options.models) {
                // eslint-disable-next-line no-undef
                return { models: kendo.stringify(options.models) }
              } else {
                // eslint-disable-next-line no-undef
                return kendo.stringify({ dict: 'MEMBER_TYPE_CD' })
              }
            }
          },
          {
            ref: 'WETHER_GRADING_CD',
            remoteData: true,
            cascade: true,
            name: 'wetherGrading',
            label: '是否定级',
            paramName: 'wetherGrading',
            optionLabel: '--请选择--',
            controlType: 'dropDownList',
            filter: 'contains',
            dataType: 'json',
            transportReadUrl: '/service/sysMng/dict/findDictByTypeWithForm',
            autoBind: true,
            schema: {
              data: function(response) {
                if (typeof response.data === 'object') {
                  if (JSON.stringify(response.data) === '{}') {
                    return []
                  }
                }
                return response.data
              }
            },
            dataMapping: {
              label: 'dictValNm',
              value: 'dictVal'
            },
            parameterMap: function(options, operation) {
              if (operation !== 'read' && options.models) {
                // eslint-disable-next-line no-undef
                return { models: kendo.stringify(options.models) }
              } else {
                // eslint-disable-next-line no-undef
                return kendo.stringify({ dict: 'WETHER_GRADING_CD' })
              }
            }
          },
          {
            ref: 'MEMBER_GRADING_CD',
            remoteData: true,
            cascade: true,
            name: 'memberGrading',
            label: '人员定级',
            paramName: 'memberGrading',
            optionLabel: '--请选择--',
            controlType: 'dropDownList',
            filter: 'contains',
            dataType: 'json',
            transportReadUrl: '/service/sysMng/dict/findDictByTypeWithForm',
            autoBind: true,
            schema: {
              data: function(response) {
                if (typeof response.data === 'object') {
                  if (JSON.stringify(response.data) === '{}') {
                    return []
                  }
                }
                return response.data
              }
            },
            dataMapping: {
              label: 'dictValNm',
              value: 'dictVal'
            },
            parameterMap: function(options, operation) {
              if (operation !== 'read' && options.models) {
                // eslint-disable-next-line no-undef
                return { models: kendo.stringify(options.models) }
              } else {
                // eslint-disable-next-line no-undef
                return kendo.stringify({ dict: 'MEMBER_GRADING_CD' })
              }
            }
          }
        ],
        kendoForm: {
          ref: 'prjMemberForm',
          valid: 'valid',
          buttons: [
            {
              name: '查询', // 按钮内容
              class: 'k-primary', // 按钮样式
              icon: 'search',
              click: this.search
            },
            {
              name: '重置', // 按钮内容
              icon: 'reset-sm', // 按钮样式
              click: this.reset
            }
          ]
        },
        kendoParamsValue: {
          wetherGrading: '',
          memberGrading: '',
          memberName: '',
          memberType: ''
        },

        /* Grid*/
        tableGridToolbar: [
          {
            text: '新增项目成员',
            class: 'k-primary',
            icon: 'add',
            option: {
              /** @Description
                 模式 ：dataReq:数据操作，请求后台处理 dataView 数据操作，请求前端页面渲染视图
                 model: 'dataReq',
                 如果是dataReq 那么必须要有 :{
                  transportRequestUrl: ''(请求地址)
                  parameterMap (请求参数)
                 }
              */
              model: 'dataView',
              componentUrl: '/projmng/prjmembermng/operate/index.vue',
              dialogTitle: '新增项目成员',
              parameterMap: {}
            },
            /**
             * @description 操作类型 add (新增) update(修改) del(删除) view(查看)
            */
            operatorType: 'add'
          },
          {
            text: '修改项目成员信息',
            class: 'k-primary',
            icon: 'edit',
            option: {
              /** @Description
                 模式 ：dataReq:数据操作，请求后台处理 dataView 数据操作，请求前端页面渲染视图
                 model: 'dataReq',
                 如果是dataReq 那么必须要有 :{
                  transportRequestUrl: ''(请求地址)
                  parameterMap (请求参数)
                 }
              */
              model: 'dataView',
              componentUrl: '/projmng/prjmembermng/operate/index.vue',
              dialogTitle: '项目成员信息',
              parameterMap: {}
            },

            /**
             * @description 操作类型 add (新增) edit(修改) del(删除) view(查看)
            */
            operatorType: 'edit'
          },
          {
            text: '查看项目成员信息',
            class: 'k-primary',
            icon: 'preview',
            option: {
              /** @Description
                 模式 ：dataReq:数据操作，请求后台处理 dataView 数据操作，请求前端页面渲染视图
                 model: 'dataReq',
                 如果是dataReq 那么必须要有 :{
                  transportRequestUrl: ''(请求地址)
                  parameterMap (请求参数)
                 }
              */
              model: 'dataView',
              componentUrl: '/projmng/operate/index.vue',
              dialogTitle: '项目成员信息',
              parameterMap: {}
            },

            /**
             * @description 操作类型 add (新增) edit(修改) del(删除) view(查看)
            */
            operatorType: 'view'
          },
          {
            text: '删除项目成员',
            class: 'k-primary',
            icon: 'delete',
            option: {
              /** @Description
                 模式 ：dataReq:数据操作，请求后台处理 dataView 数据操作，请求前端页面渲染视图
                 model: 'dataReq',
                 如果是dataReq 那么必须要有 :{
                  transportRequestUrl: ''(请求地址)
                  parameterMap (请求参数)
                 }
              */
              model: 'dataReq',
              transportRequestUrl: '',
              parameterMap: {}
            },
            /**
             * @description 操作类型 add (新增) edit(修改) del(删除) view(查看)
            */
            operatorType: 'del'
          },
          {
            text: '查看项目成员组织结构',
            class: 'k-primary',
            icon: 'preview',
            option: {
              /** @Description
                 模式 ：dataReq:数据操作，请求后台处理 dataView 数据操作，请求前端页面渲染视图
                 model: 'dataReq',
                 如果是dataReq 那么必须要有 :{
                  transportRequestUrl: ''(请求地址)
                  parameterMap (请求参数)
                 }
              */
              model: 'dataView',
              componentUrl: '/projmng/prjmembermng/operate/prjmembershapes.vue',
              dialogTitle: '项目成员组织结构',
              parameterMap: {}
            },

            /**
             * @description 操作类型 add (新增) edit(修改) del(删除) view(查看)
            */
            operatorType: 'add'
          }
        ],
        // maintain 图片维护操作列表
        tableGridOption: {
          ref: 'PrjMemberOptGrid',
          dataSourceRef: 'prjMemberDataSource',
          remoteData: true,
          sortable: true,
          reorderable: true,
          resizable: true,
          pageable: true,
          selectSingle: false,
          selectMultiple: true,
          toolbar: ['excel', 'pdf'],
          excel: {
            fileName: '项目成员列表',
            allPages: true,
            filterable: true
          },
          columns: [
            {
              field: 'relPrjNo',
              title: '所属项目名称',
              width: 380,
              dictData: 'REL_PRJ_CD'
            },
            {
              field: 'memberNo',
              title: '成员编号',
              width: 120
            },
            {
              field: 'memberName',
              title: '成员名称',
              width: 120
            },
            {
              field: 'memberType',
              title: '成员类型',
              dictData: 'MEMBER_TYPE_CD',
              width: 120
            },
            {
              field: 'entranceDt',
              title: '入场日期',
              width: 120
            },
            {
              field: 'wetherBowoutwith',
              title: '是否离场',
              dictData: 'WETHER_BOWOUTWITH_CD',
              width: 100
            },
            {
              field: 'bowoutwithDt',
              title: '离场日期',
              width: 120
            },
            {
              field: 'wetherGrading',
              title: '是否定级',
              dictData: 'WETHER_GRADING_CD',
              width: 100
            },

            {
              field: 'memberGrading',
              title: '人员定级',
              dictData: 'MEMBER_GRADING_CD',
              width: 150
            }
            // {
            //   field: 'unitPrice',
            //   title: '人员单价',
            //   format: '{0:c2}',
            //   width: 180,
            //   hidden: true
            // }
          ]
        },
        tableGridDataSourceOption: {
          ref: 'dictDataSource',
          type: 'json',
          pageSize: 10,
          transportReadUrl: '/service/prjMng/prjMemberMng/findPrjMemberPage',
          serverPaging: true,
          dict: ['WETHER_GRADING_CD', 'MEMBER_GRADING_CD', 'WETHER_BOWOUTWITH_CD', 'MEMBER_TYPE_CD'],
          remoteTransData: {
            REL_PRJ_CD: {
              transportName: 'prjInfoMngServiceImpl',
              transportMethod: 'prjTransDict',
              transportParam: {}
            }
          },
          params: {},
          schema: {
            model: {
              id: 'id',
              fields: {
                relPrjNo: { editable: false, type: 'string' },
                memberNo: { editable: false, type: 'string' },
                memberName: { editable: false, type: 'string' },
                memberType: { editable: false, type: 'string' },
                entranceDt: { editable: false, type: 'string' },
                wetherGrading: { editable: false, type: 'string' },
                memberGrading: { editable: false, type: 'string' },
                unitPrice: { editable: false, type: 'number', format: '{0,c3}' }
              }
            },
            data: function(response) {
              if (typeof response.data === 'object') {
                if (JSON.stringify(response.data) === '{}') {
                  return []
                }
              }
              return response.data.list
            },
            total: function(response) {
              if (typeof response.data === 'object') {
                if (JSON.stringify(response.data) === '{}') {
                  return 0
                }
              }
              return response.data.total
            }
          }
        },
        selectData: []
      }
    },
    mounted() {

    },
    methods: {
      /* grid*/
      parameterMap(options, operation) {
        if (operation !== 'read' && options.models) {
          // eslint-disable-next-line no-undef
          return { models: kendo.stringify(options.models) }
        } else {
          let parameterMap = {}
          parameterMap.pageNum = options.page
          parameterMap.pageSize = options.pageSize
          parameterMap = Object.assign(parameterMap, this.tableGridDataSourceOption.params)
          parameterMap = Object.assign(parameterMap, this.deepCopy(this.kendoParamsValue))
          return {
            // eslint-disable-next-line no-undef
            parameterMap: kendo.stringify(parameterMap)
          }
        }
      },
      selectDataItems(res) {
        this.selectData = res
      },
      search(paramVal, validator) {
        this.tableGridDataSourceOption.params = Object.assign(this.tableGridDataSourceOption.params, this.deepCopy(paramVal))
        this.$refs['PrjMemberKendoGrid'].transportReadGrid()
      },
      reset(paramVal) {
        Object.keys(paramVal).forEach(key => {
          if (Array.isArray(paramVal[key])) {
            this.kendoParamsValue[key] = []
          } else {
            this.kendoParamsValue[key] = ''
          }
        })
        this.$refs['PrjMemberKendoGrid'].transportReadGrid()
      }
    }
  }
</script>

<style>

</style>
